<template>
  <view class="login-container">
    <view style="height: 100px;"></view>
    <!-- 语言切换 -->
    <view class="lang-switch" @click="showLang = !showLang">
      <text>{{ currentLangLabel }}</text>
      <text class=" arrow tn-icon-down"></text>

      <view v-if="showLang" class="lang-dropdown">
        <view v-for="item in langList" :key="item.value" class="lang-item" @click.stop="changeLang(item)">
          {{ item.label }}
        </view>
      </view>
    </view>

    <!-- logo -->
    <image class="logo" src="/static/image/logo.png" mode="widthFix"></image>
    <view style="position: fixed;bottom: 70px;">
      <!-- 注册/登录按钮 -->
      <view class="login-btn-area">
        <text class="has-account">已经拥有账户了吗?</text>
        <button class="login-btn" @click="goLogin">注册/登录</button>
        <view class="quick-entry" style="text-align: center;">
          <text class="quick-entry-text" @click="show=true">全面版快速入口</text>
          <text class="tn-icon-right"></text>
        </view>

        <!-- 快速入口 -->


      </view>

      <!-- 第三方登录 -->
      <PartyLogin />


    </view>
    <tn-popup v-model="show" mode="bottom" borderRadius="50">
      <view class="pop-modal">
        <view class="pop-title">全面版快速入口</view>
        <view class="pop-desc">您已选择"全面版快速入口"模式进入应用。系统将直接跳转到全面版（非 Wi-Fi版）。</view>
        <button class="pop-btn u-f-ajc" @click="goEasy">确认进入</button>
      </view>
    </tn-popup>

  </view>
</template>

<script>
import PartyLogin from './component/PartyLogin.vue'
export default {
  components: {
    PartyLogin
  },
  data() {
    return {
      show:false,
      showLang: false,
      currentLang: 'zh-CN',
      langList: [
        { label: '简体中文', value: 'zh-CN' },
        { label: '繁體中文', value: 'zh-TW' },
        { label: 'English', value: 'en' }
      ]
    }
  },
  computed: {
    currentLangLabel() {
      const found = this.langList.find(l => l.value === this.currentLang)
      return found ? found.label : '语言切换'
    }
  },
  methods: {
    goEasy() { 
      uni.navigateTo({
        url: '/pages/index/instruction?type=easy'
      })
    },
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    changeLang(item) {
      this.currentLang = item.value
      this.showLang = false
      // TODO: 这里可以加上实际的多语言切换逻辑
    }
  }
}
</script>

<style>

.login-container {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.lang-switch {
  position: absolute;
  top: 102rpx;
  right: 48rpx;
  z-index: 10;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #888;
  cursor: pointer;
}

.arrow {
  margin-left: 8rpx;
  font-size: 22rpx;
}

.lang-dropdown {
  position: absolute;
  top: 48rpx;
  right: 0;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
  min-width: 160rpx;
  padding: 16rpx 0;
}

.lang-item {
  width: 180rpx;
  padding: 16rpx 32rpx;
  font-size: 28rpx;
  color: #222;

}

.lang-item:hover {
  background: #f5f5f5;
}

.logo {
  width: 320rpx;
  margin: 180rpx 0 60rpx 0;
  display: block;
}

.login-btn-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12rpx;
  font-size: 20rpx;
}

.has-account {
  color: #888;
  font-size: 26rpx;
  margin-bottom: 16rpx;
}

.login-btn {
  width: 600rpx;
  height: 96rpx;
  background: #000;
  color: #fff;
  line-height: 96rpx;
  border-radius: 48rpx;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
}

.quick-entry {
  display: flex;
  align-items: center;
  margin-bottom: 48rpx;
  color: #888;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.quick-entry-arrow {
  margin-left: 8rpx;
  font-size: 32rpx;
}

.pop-modal {
  background: #fff;
  border-radius: 20rpx;
  padding: 48rpx 36rpx 40rpx 36rpx;
  box-sizing: border-box;
  width: 100vw;
  height: 400px;
  max-width: 700rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pop-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  color: #111;
  align-self: flex-start;
}
.pop-desc {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 180rpx;
  align-self: flex-start;
  line-height: 1.7;
}
.pop-btn {
  margin-top: 100rpx;
  width: 100%;
  height: 88rpx;
  background: #000;
  color: #fff;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
  margin-top: 20rpx;
}

</style>
